<template>
  <div class="albumDetail">
    <!-- 专辑详细信息 -->
    <div class="top">
      <div class="left">
        <img :src="albumDetail.picUrl" />
      </div>
      <div class="right">
        <div class="title">
            <el-tag type="danger" effect="plain">专辑</el-tag>
            <h2>{{ albumDetail.name }}</h2>
            <h2 style="color: #8e8888;" v-if="albumDetail.alias">{{ albumDetail.alias[0] }}</h2>
        </div>
        <div class="btn">
          <el-button-group>
            <el-button size="mini" type="primary" class="iconfont icon-playcircle"> 播放全部</el-button>
            <el-button type="primary" size="mini" class="iconfont icon-add"></el-button>
          </el-button-group>
          <el-button size="mini" class="iconfont icon-folder-add"> 收藏({{ albumDetailDynamic.subCount }})</el-button>
          <el-button size="mini" class="iconfont icon-share"> 分享({{ albumDetailDynamic.shareCount }})</el-button>
          <el-button size="mini" class="iconfont icon-download"> VIP下载</el-button>
        </div>
        <div class="singer">
          <span>歌手：</span>
          <a v-for="(item, index) in albumDetail.artists" :key="index">
            {{ index + 1 === albumDetail.artists.length ? item.name : item.name + ' / ' }}
          </a>
        </div>
        <div class="time">
          <span>时间：{{ albumDetail.publishTime | showDate }}</span>
        </div>
      </div>
    </div>
    <div class="albumTable">
      <el-tabs v-model="activeName">
        <el-tab-pane label="歌曲列表" name="first">
          <AlbumSongList :list="songslist"></AlbumSongList>
        </el-tab-pane>
        <el-tab-pane :label="'评论' + '(' +albumDetailDynamic.commentCount + ')' " name="second">
          <AlbumComment></AlbumComment>
        </el-tab-pane>
        <el-tab-pane label="专辑详情" name="third">
          <AlbumInfo :albumdetail="albumDetail.description"></AlbumInfo>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import AlbumInfo from './AlbumInfo.vue'
import AlbumSongList from './AlbumSongList.vue'
import AlbumComment from './AlbumComment.vue'
import { formatTime, timeFormat } from '../../common/util.js'
import { getNewAlbumDetail, getNewAlbumDetailDynamic } from '../../../network/playlist.js'
export default {
  components: {
    AlbumInfo,
    AlbumSongList,
    AlbumComment
  },
  data () {
    return {
      id: '',
      albumDetail: {},
      albumDetailDynamic: {},
      activeName: 'first',
      songslist: []
    }
  },
  methods: {
    getNewAlbumDetail (id) {
      getNewAlbumDetail(id).then(res => {
        // console.log(res.data)
        res.data.songs.forEach(item => {
          item.dt = timeFormat(item.dt)
        })
        this.albumDetail = res.data.album
        this.songslist = res.data.songs
        // console.log(this.songslist)
        // console.log(this.albumDetail)
      })
    },
    getNewAlbumDetailDynamic (id) {
      getNewAlbumDetailDynamic(id).then(res => {
        // console.log(res.data)
        this.albumDetailDynamic = res.data
        // console.log(this.albumDetailDynamic)
      })
    }
  },
  filters: {
    showDate: function (value) {
      const date = new Date(value)
      return formatTime(date, 'yyyy-MM-dd')
    }
  },
  created () {
    this.id = this.$route.params.id
    this.getNewAlbumDetail(this.id)
    this.getNewAlbumDetailDynamic(this.id)
  }
}
</script>

<style lang="less" scoped>
  .albumDetail {
    width: 82%;
    overflow: auto;
    .top {
      width: 93%;
      margin: 30px auto;
      display: flex;
      justify-content: flex-start;
      .left {
        width: 20%;
        img {
          width: 100%;
        }
      }
      .right {
        // background-color: #0077AA;
        width: 75%;
        margin-left: 30px;
        padding: 10px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .title {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          h2 {
            margin-left: 10px;
          }
          .el-tag {
            color: #fff;
            background-color: #c62f2f;
          }
        }
        .btn {
          display: flex;
          flex-direction: row;
          .el-button-group {
            margin-right: 10px;
          }
        }
        .singer {
          font-size: 15px;
          a {
            color: #5d73cc;
          }
        }
        .time {
          font-size: 15px;
        }
      }
    }
    .albumTable {
      position: relative;
      width: 95%;
      margin: 15px auto;
      .songs_search {
        width: 20%;
        position: absolute;
        top: 0;
        right: 0;
      }
      .el-tabs {
        margin-top: 10px;
      }
    }
  }
</style>
